<template>
    <div class="main-index">
        <HomeBanner></HomeBanner>
        <HomeNewCourse></HomeNewCourse>
        <HomeCategoryCourse :cate="firstRecommendCourse"></HomeCategoryCourse>
        <HomeCategoryCourse :cate="secondRecommendCourse"></HomeCategoryCourse>
    </div>
</template>
  
<script>
import HomeBanner from '@/views/home/HomeBanner.vue'
import HomeNewCourse from '@/views/home/HomeNewCourse.vue'
import HomeCategoryCourse from '@/views/home/HomeCategoryCourse.vue'

export default {
    name: 'Home',
    data(){
        return {
            firstRecommendCourse:{id:8,name:'PHP'},
            secondRecommendCourse:{id:9,name:'Web前端'}
        }
    },
    components: {
        HomeBanner,
        HomeNewCourse,
        HomeCategoryCourse
    }
}
</script>
  
<style>
.main-index .m-box{padding:30px 0;}
.main-index .m-box:nth-child(even){background:#f1f1f1;}
.main-index .m-box:nth-child(odd){background:#fff;}
</style>
  